import React, {useState, useEffect} from 'react'
import { Form, Input, Select, Radio, Table, Drawer, ConfigProvider, theme, Button } from 'antd'
import LoansForm from './components/loansForm'
import CreditForm from './components/creditForm'
import classnames from 'classnames'
import './styles/index.less'

const Interest = (props) => {
  const [currentTab, setCurrentTab] = useState('loans')
  const [open, setOpen] = useState(false)
  const [repaymentPlan, setRepaymentPlan] = useState({})

  const [loansForm] = Form.useForm();
  const [creditForm] = Form.useForm();

  useEffect(() => {
  }, [])

  const onClose = () => {
    setOpen(false);
  };

  const loansColumns = [
    {
      title: '月份',
      width: 60,
      dataIndex: 'month',
      fixed: 'left',
      align: 'center'
    },
    {
      title: '还款金额',
      width: 110,
      dataIndex: 'payment',
    },
    {
      title: '利息',
      width: 100,
      dataIndex: 'interest',
    },
    {
      title: '本金',
      width: 100,
      dataIndex: 'principal',
    },
    {
      title: '剩余',
      width: 100,
      dataIndex: 'endingBalance',
    },
  ];

  const creditColumns = [
    {
      title: '月份',
      width: 60,
      dataIndex: 'month',
      fixed: 'left',
      align: 'center'
    },
    {
      title: '期初余额',
      width: 110,
      dataIndex: 'beginningBalance',
    },
    {
      title: '利息',
      width: 100,
      dataIndex: 'interest',
    },
    {
      title: '本金',
      width: 100,
      dataIndex: 'principal',
    },
    {
      title: '剩余',
      width: 100,
      dataIndex: 'endingBalance',
    },
    {
      title: '还款金额',
      width: 110,
      dataIndex: 'payment',
    }
  ];

  const dataSource = Array.from({ length: 13 }).map((_, i) => ({
    key: i,
    month: `${i + 1}`,
    amount: 3232.12,
    principal: 1532.12,
    interest: 21.22,
    residue: 12334.44
  }));

  const handleSubmit = (type, values) => {
    console.log(values)
    setRepaymentPlan(values)
    setOpen(true)
  }

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
        components: {
          Select: {
            // colorPrimary: '#1890ff',
            // colorBorder: '#383C4D',
            // colorBgElevated: '#333',
            // colorBgContainer: '#FFF',
            optionSelectedBg: '#2A2A2A',
            // colorTextPlaceholder: '#999',
            // hoverBorderColor: '#2A2A2A',
            activeBorderColor: '#79797A',
            // activeOutlineColor: '#383C4D',
            // colorText: '#FFF',
            // selectorBg: '#1C1C20'
          },
        },
      }}
    >
      <div className="interest-page">
        <div className="interest-page-top"></div>
        <div className="interest-main">
          <div className="interest-tab">
            <div className={classnames({
              'tab-item': true,
              active: currentTab === 'loans'
            })} onClick={() => setCurrentTab('loans')}>贷款</div>
            <div className={classnames({
              'tab-item': true,
              active: currentTab === 'credit'
            })} onClick={() => setCurrentTab('credit')}>信用卡</div>
          </div>
          <div className="interest-form">
            <div className={classnames({
              'interest-form-main': true,
              'slide_right': currentTab === 'credit'
            })}>
              <LoansForm form={loansForm} onSubmit={(values) => handleSubmit('loans', values)} />
              <CreditForm form={creditForm} onSubmit={(values) => handleSubmit('credit', values)} />
            </div>
          </div>
        </div>
        <div className="interest-footer">
          <Button type="primary" className="submit-btn" onClick={() => {
            if (currentTab === 'loans') {
              loansForm.submit()
            }
            if (currentTab === 'credit') {
              creditForm.submit()
            }
          }}>
            开始计算
          </Button>
        </div>
      </div>
      <Drawer
        title="Basic Drawer"
        placement="bottom"
        height="calc(100% - 60px)"
        styles={{
          header: { display: 'none' }
        }}
        maskClosable={false}
        onClose={onClose}
        closable={false}
        open={open}
      >
        <div className="returned-drawer">
          <i className="pack-up-btn" onClick={() => onClose()}></i>
          <div className="returned-header">
            {
              currentTab === 'loans' && (
                <ul>
                  <li>
                    <div className="header-item-label">每月还款</div>
                    <div className="header-item-value"><span>{repaymentPlan.monthlyPayment}</span></div>
                  </li>
                  <li>
                    <div className="header-item-label">总利息</div>
                    <div className="header-item-value"><span>{repaymentPlan.totalInterest}</span></div>
                  </li>
                  <li>
                    <div className="header-item-label">总还款额</div>
                    <div className="header-item-value"><span>{repaymentPlan.totalPayment}</span></div>
                  </li>
                </ul>
              )
            }
            {
              currentTab === 'credit' && (
                <ul>
                  <li>
                    <div className="header-item-label">还款月数</div>
                    <div className="header-item-value"><span>{repaymentPlan.monthsToPayoff}</span></div>
                  </li>
                  <li>
                    <div className="header-item-label">总利息</div>
                    <div className="header-item-value"><span>{repaymentPlan.totalInterest}</span></div>
                  </li>
                  <li>
                    <div className="header-item-label">总还款额</div>
                    <div className="header-item-value"><span>{repaymentPlan.totalCost}</span></div>
                  </li>
                </ul>
              )
            }
          </div>
          <div className="returned-title">还款计划</div>
          <div className="returned-main">
            <Table
              size="small"
              columns={currentTab === 'loans' ? loansColumns : creditColumns}
              rowKey="month"
              dataSource={repaymentPlan.paymentSchedule}
              pagination={false}
              scroll={{ y: 265, x: 100 }}
            />
          </div>
        </div>
      </Drawer>
    </ConfigProvider>
  )
}

export default Interest;